<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { processDefinePageList, processDefineBaseDelete } from "@/api/flowable";
import { BaseRequest, ShowColumn } from "@/api/index";
import { ProcessDefineVO } from "@/api/flowable";
import FlowableDefine from "./FlowableDefine.vue";
import FlowableDefineInfo from "./FlowableDefineInfo.vue";
import { Refresh, Search } from "@element-plus/icons-vue";

const router = useRouter();

const baseRequest = ref<BaseRequest>();

const flowableDefineRef = ref();

const flowableDefineInfoRef = ref();

const pageListData = ref<Array<ProcessDefineVO>>([]);

const total = ref<number>(0);

const showColumns = ref<Array<ShowColumn>>([]);

const tableLoad = ref<boolean>(false);

const initBaseRequest = () => {
  baseRequest.value = {
    pageNo: 0,
    pageSize: 10,
    baseQueries: [
      {
        title: "流程名称",
        columnName: "processName",
        filterMode: "=",
        values: []
      }
    ]
  };
};
const initShowColumns = () => {
  showColumns.value = [
    {
      columnName: "流程名称",
      columnApi: "processName",
      width: 0
    },
    {
      columnName: "流程Api",
      columnApi: "processApi",
      width: 0
    },
    {
      columnName: "业务Api",
      columnApi: "businessApi",
      width: 0
    },
    {
      columnName: "流程类型",
      columnApi: "businessType",
      width: 0
    },
    {
      columnName: "部署状态",
      columnApi: "deployState",
      width: 0
    }
  ];
};

const getPageListData = async () => {
  tableLoad.value = true;
  const res = await processDefinePageList(baseRequest.value);
  if (res.success) {
    pageListData.value = res.data;
    total.value = parseInt(res.total);
  }
  tableLoad.value = false;
};

const reset = () => {
  initBaseRequest();
  getPageListData();
};

onBeforeMount(() => {
  initBaseRequest();
  initShowColumns();
});

onMounted(() => {
  getPageListData();
});

const handleSizeChange = (val: number) => {
  baseRequest.value.pageSize = val;
  getPageListData();
};
const handleCurrentChange = (val: number) => {
  baseRequest.value.pageNo = val;
  getPageListData();
};

const addFlowable = () => {
  flowableDefineRef.value.open();
};
const updateFlowable = (id: string) => {
  flowableDefineRef.value.open(id);
};
const deleteById = async (id: string) => {
  const res = await processDefineBaseDelete({ id });
  if (res.success) {
    getPageListData();
  }
};
const info = (id: string) => {
  flowableDefineInfoRef?.value?.open(id);
};

const defineFlowable = (id: string) => {
  router.push("/flowanle/processDesign?id=" + id);
};
</script>

<template>
  <el-row class="screen">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item
        v-for="item in baseRequest.baseQueries"
        :key="item.columnName"
        :label="item.title"
      >
        <el-input v-model="item.values[0]" clearable />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          type="primary"
          @click="getPageListData"
          style="width: 100px"
          >查询</el-button
        >
        <el-button :icon="Refresh" @click="reset" style="width: 100px"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </el-row>
  <el-row class="action-bar">
    <el-button
      type="primary"
      plain
      size="small"
      style="width: 80px"
      @click="addFlowable"
      >新建流程</el-button
    >
    <el-button type="primary" plain size="small" style="width: 80px"
      >导出</el-button
    >
    <el-button type="primary" plain size="small" style="width: 80px"
      >导入</el-button
    >
  </el-row>
  <el-row class="page-list">
    <el-table :data="pageListData" style="width: 100%" v-loading="tableLoad">
      <el-table-column
        v-for="item in showColumns"
        :key="item.columnApi"
        :prop="item.columnApi"
        :label="item.columnName"
        :width="item.width"
      >
        <template v-if="item.customHandle" #default="scope">
          {{ item.customHandle(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="updateFlowable(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="info(scope.row.id)"
            >详情</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="defineFlowable(scope.row.id)"
            >定义流程</el-button
          >
          <el-button link type="primary" size="small">部署</el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="deleteById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <el-row class="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </el-row>

  <flowable-define ref="flowableDefineRef" :query="getPageListData" />
  <flowable-define-info ref="flowableDefineInfoRef" :query="getPageListData" />
</template>

<style scoped>
.action-bar {
  margin-top: 10px;
}

.page-list {
  margin-top: 20px;
}

.pagination {
  float: right;
  margin-top: 20px;
}
</style>
